<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{ margin:0; border:0; padding:0}
	div{ width:900px; height:500px; background:#0F0; margin:auto}
	h3{  width:100%; height:50px; background-color:#03C;}
	h3 p{ width:280px; float:left; margin:0 5px; background-color:#FFF; height:100%}
	div div{ width:95%; height:60%; background-color:#FF0; margin:0 auto }
</style>

<script type="text/javascript">
window.onload = function(){
		showlist();
	}
function showlist(){
	var gtit = document.getElementsByClassName('tit');
	var ghide = document.getElementsByClassName('hide');
	var i=0,j=0;
	for(i=0;i<gtit.length;i++)
	{
		gtit[i].onclick = function()
		{
			alert(gtit[i].index);
			/*ghide[this.index].style.display='block';
			for(j=0;j<ghide.length;j++)
			{
				ghide[j].style.display='none';	
			}*/
			
		}
		
	}
}

</script>
</head>

<body>

<div>
	<h3>
    	<p class="tit">1</p>
        <p class="tit">2</p>
        <p class="tit">3</p>
    </h3>
    <div class="hide" style="display:block">1</div>
    <div class="hide" style="display:none">2</div>
    <div class="hide" style="display:none">3</div>
</div>
</body>
</html>
